<script setup>
import { userService_updateInfo } from '@/apis/user'
import { useUserInfo } from '@/stores/index.js'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
let title = ref('基本资料')
let useStore = useUserInfo()
const profileForm = ref({
  email: '',
  id: '',
  nickname: '',
  user_pic: '',
  username: ''
})
// 模板引用
const profileFormRef = ref(null)

onMounted(() => {
  profileForm.value = useStore.userInfo
})

const myRule = ref({
  nickname: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
  // 一个或者多个非空白非@字符，[^\s@]：非空白非@字符，+：量词，一个或者多个
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    {
      required: true,
      message: '您输入的邮箱格式有误',
      trigger: 'blur',
      pattern: /^[^\s@]+@[^\s@]+.[^\s@]+$/
    }
  ]
})

const submitInfo = async () => {
  // 表单验证，可以通过绑定表单实例，去调用对应的方法
  if (profileFormRef.value.validate()) {
    await userService_updateInfo(profileForm.value)
    ElMessage({
      type: 'success',
      message: '修改成功'
    })
  }
}
</script>

<template>
  <CardPage :title="title">
    <template #extra>
      <el-form
        v-if="profileForm"
        ref="profileFormRef"
        :model="profileForm"
        :rules="myRule"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="登录名称">
          <el-input v-model="profileForm.username" disabled size="large" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="profileForm.nickname" size="large" />
        </el-form-item>

        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="profileForm.email" size="large" />
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="submitInfo">提交修改</el-button>
        </el-form-item>
      </el-form>
    </template>
  </CardPage>
</template>

<style lang="scss" scoped>
:deep .el-form-item__content {
  flex: none;
  width: 550px;
}
</style>
